<template>
    <div class="search">
        <div class="header">
            <a-input-search v-model="info.input" @search="search" placeholder="MGO音乐,搜你想听">
                <template #prepend>
                    <a-select style="width:80px;" v-model="info.type" placeholder="音乐平台">
                        <a-option value="netease">网易</a-option>
                        <a-option value="qq">ＱＱ</a-option>
                        <a-option value="kugou">酷狗</a-option>
                        <a-option value="kuwo">酷我</a-option>
                        <a-option value="migu">咪咕</a-option>
                    </a-select>
                </template>
            </a-input-search>
        </div>
        <ul class="body" v-if="list.musics.length != 0">
            <li v-for="(item,index) of list.musics" :key="item.songid" class="item">
                        <icon-music style="color: var(--color-fill-3);margin-right: 10px;"/>
                <div class="desc">
                    <div class="title">{{ item.brandName }}</div>
                    <div class="author">{{ item.companyName }}</div>
                </div>
                <div class="opera">
                    <a-button shape="round" @click="play(index)">
                        <template #icon>
                            <icon-pause v-if="(musicID.index==index )&&(musicID.id== item.description)"/>
                            <icon-play-arrow v-else/>
                        </template>
                    </a-button>
                    <a-button shape="round">
                        <template #icon>
                        <icon-heart @click="subAddMusic(item)"/>
                    </template>
                    </a-button>
                </div>
            </li>
        </ul>
        <a-empty class="empty" v-else>
            <template #image>
                <icon-loading v-if="loading" />
                <img src="../assets/empty.svg" v-else style="width: 80%;object-fit: contain;height: auto;" />
            </template>
            <a-button shape="round">{{ loading ? "正在搜索中……" : "没有数据，搜索一下" }}</a-button>
        </a-empty>

        <div class="open_close">
            <icon-double-left v-if="isPoen" />
            <icon-double-right v-else />
        </div>
    </div>
</template>
<script setup>
import { Message } from '@arco-design/web-vue';
import { reactive, ref } from 'vue';
import { SwtichMusicUrl,addMusic } from "../apis/music"
import ByMusic from "../player/index";

const emit = defineEmits(['love', 'play'])
const info = reactive({
    input: "",
    filter: "name",
    type: "netease",
    page: 1
})
const list = reactive({
    musics: []
})
const musicID=reactive({
    index:-1,
    id:-1
})
const loading = ref(false)
const isPoen = ref(true)

const search = () => {
    loading.value = true
    list.musics = []
    SwtichMusicUrl(info).then(res => {
        console.log(res)
        loading.value = false
        const data = res.data;
        for(let i=0,len=data.length;i<len;i++){
            let item=data[i]
            list.musics.push({
                status: item.type,
                brandName: item.title,
                companyName: item.author,
                id: "",
                ordered: "",
                description: item.songid,
                pic:item.pic,
                url:item.url,
                lrc:item.lrc
            })
        }
    }).catch(err => {
        Message.warning("空空如也~")
        loading.value = false
        list.musics = []
    })
}
ByMusic.$watch("current", (current) => {
     if(current<0){
            return
        }
    console.log("search",current)
    musicID.index=current
    const item=ByMusic.list[current]
    musicID.id=item.music_id
})
const subAddMusic=(item)=>{
    addMusic(item).then(res=>{
        emit("love")
    }).catch(err=>{
        Message.warning(err.data.msg)
    })
}
const play=(index)=>{
    emit('play',index,list.musics)
}
</script>

<style lang="less" scoped>
.search {
    padding: 0px 10px;
    width: 350px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: auto;
    position: relative;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    .header {
        position: sticky;
        margin-top: 10px;
        padding: 10px 0;
        top: 0;
        z-index: 99;
    }

    .body {
        flex: 1px;

        .item {
            display: flex;
            padding: 10px;
            align-items: center;
            transition: all .3s;
            border-radius: 5px;
            border-bottom:1px solid rgba(255,255,255,0.08);
            cursor: pointer;

            &:hover {
                background-color: rgba(0, 0, 0, 20%);
            }

            .desc {
                flex: 1;
                overflow: hidden;

                div {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .title {
                    font-size: 14px;
                    color:var(--color-fill-1);
                    margin-bottom: 5px;
                    transition: all .3s;

                    &:hover {
                        color: #fff;
                    }
                }

                .author {
                    font-size: 14px;
                    color: var(--color-fill-2);
                    transition: all .3s;

                    &:hover {
                        color: var(--color-fill-1);
                    }
                }
            }

            .opera {
                font-size: 24px;
                button{
                    margin: 0 5px;
                }
                svg {
                    color: var(--color-text-3);
                    padding: 5px;
                    transition: all .3s;

                    &:hover {
                        color: rgb(var(--primary-6));
                    }
                }

            }
        }
    }

    .open_close {
        position: absolute;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 20px 5px;
        background-color: #a0bdc1;
        display: none;
    }
}
</style>